<template>
  <div>
      <el-form :inline="true" :model="form">
          <el-form-item label="分销平台">
              <el-select size="mini" v-model="form.platform" placeholder="分销平台" clearable>
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="淘宝" value="1"></el-option>
                  <el-option label="京东" value="2"></el-option>
                  <el-option label="拼多多" value="3"></el-option>
                  <!-- <el-option label="唯品会" value="4"></el-option>
                  <el-option label="考拉海购" value="5"></el-option> -->
              </el-select>
          </el-form-item>
          <el-form-item label="订单编号">
              <el-input size="mini" placeholder="请输入订单编号" v-model="form.orderNo" />
          </el-form-item>
          <el-form-item label="商品名称">
              <el-input size="mini" placeholder="请输入商品名称" v-model="form.title" />
          </el-form-item>
          <el-form-item label="下单用户">
              <el-input size="mini" placeholder="请输入下单用户" v-model="form.nickName" />
          </el-form-item>
          <el-form-item label="奖励用户">
              <el-input size="mini" placeholder="请输入奖励用户" v-model="form.parentNickName" />
          </el-form-item>
          <el-form-item label="订单状态">
              <el-select size="mini" v-model="form.orderStatus" placeholder="订单状态" clearable>
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="已完成" value="1"></el-option>
                  <el-option label="已付款" value="2"></el-option>
                  <el-option label="已失效" value="3"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="结算状态">
              <el-select size="mini" v-model="form.settleStatus" placeholder="结算状态" clearable>
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="已结算" value="1"></el-option>
                  <el-option label="未结算" value="2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="入账状态">
              <el-select size="mini" v-model="form.inStatus" placeholder="入账状态" clearable>
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="已入账" value="1"></el-option>
                  <el-option label="未入账" value="2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="下单日期">
              <el-date-picker
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  size="mini"
                  v-model="tkCreatedAt"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions">
              </el-date-picker>
          </el-form-item>
          <el-form-item>
              <el-button size="mini" type="primary" @click="handleFilter">查询</el-button>
              <el-button type="primary" class="ml10" size="mini" @click="sync">同步订单</el-button>
              <el-button class="ml10" size="mini" @click="exportExcel">导出</el-button>
          </el-form-item>
      </el-form>
      <el-alert
              v-if="ids&&ids.length>0"
              show-icon>
          <template slot="title">
              <span>已选择 {{ids.length}} 项</span> <el-button @click="clear()" type="text">清空</el-button> 
              <el-button  @click="handleSettle()" type="text">批量结算</el-button> 
              <el-button  @click="handleIn()" type="text">批量入账</el-button> 
          </template>
      </el-alert>
      <el-table @selection-change="selectChange" ref="dataTable" :height="tableHeight" :data="list"
                      @sort-change="tblSort"
              style="width: 100%">
          <el-table-column
                  fixed
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column align="left" label="订单编号" width="200">
              <template slot-scope="scope">
                  <span>{{scope.row.tradeId}}</span>
              </template>
          </el-table-column>
          <el-table-column align="left" label="分销平台" width="100">
              <template slot-scope="scope">
                  <span>{{scope.row.platformName}}</span>
              </template>
          </el-table-column>
          <el-table-column align="left" label="订单状态" width="130">
              <template slot-scope="scope">
                  <span>{{scope.row.orderStatusText}}</span>
              </template>
          </el-table-column>
          <el-table-column align="left" label="结算状态" width="130">
              <template slot-scope="scope">
                  <span>{{scope.row.settleStatusText}}</span>
              </template>
          </el-table-column>
          <el-table-column align="left" label="入账状态" width="130">
              <template slot-scope="scope">
                  <span>{{scope.row.inStatusText}}</span>
              </template>
          </el-table-column>
          <el-table-column align="left" label="商品名称" width="300">
              <template slot-scope="scope">
                  <span>{{scope.row.title}}</span>
              </template>
          </el-table-column>
          <el-table-column align="center" label="买家" width="200">
              <template slot-scope="scope">
                  <span>{{scope.row.nickName}}</span>
              </template>
          </el-table-column>
          <el-table-column width="100" align="right" label="订单金额" sortable="custom" prop="pay_price">
              <template slot-scope="scope">
                  <span>￥{{scope.row.payPrice}}</span>
              </template>
          </el-table-column>
          <el-table-column width="100" align="right" label="收益预估" sortable="custom" prop="share_fee">
              <template slot-scope="scope">
                  <span>￥{{scope.row.shareFee}}</span>
              </template>
          </el-table-column>
          <el-table-column width="100" align="right" label="最终收益" sortable="custom" prop="commission">
              <template slot-scope="scope">
                  <span>￥{{scope.row.commission}}</span>
              </template>
          </el-table-column>
          <el-table-column align="center" label="下单时间" width="150" sortable="custom" prop="tk_created_at">
              <template slot-scope="scope">
                  <span>{{scope.row.tkCreatedAt}}</span>
              </template>
          </el-table-column>
          <el-table-column
                  fixed="right"
                  label="操作"
                  width="170">
              <template slot-scope="scope">
                  <el-button v-if="scope.row.rewardUid>0" type="text" @click="handleDetail(scope.row)">分配明细</el-button>
                  <el-button v-if="scope.row.canSettle == 1" type="text" @click="handleSettle(scope.row)">结算</el-button>
                  <el-button v-if="scope.row.canIn == 1" type="text" @click="handleIn(scope.row)">入账</el-button>
                  <!-- <el-button v-if="scope.row.canSend==1" type="text" @click="handleSend(scope.row)">发货</el-button> -->
              </template>
          </el-table-column>
      </el-table>
      <div class="pagination-container">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="form.pageNum" :page-sizes="[20,30, 50]" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
      </div>

      <el-dialog title="佣金分配明细" :visible.sync="dialogDetailVisible" :close-on-click-modal="false" width="500px">
          
          <el-table :data="rewardList">
              <el-table-column align="left" label="奖励用户">
                  <template slot-scope="scope">
                      <span>{{scope.row.nickName}}</span>
                  </template>
              </el-table-column>
              <el-table-column align="right" label="比例">
                  <template slot-scope="scope">
                      <span>{{scope.row.percent}}</span>
                  </template>
              </el-table-column>
              <el-table-column align="right" label="佣金">
                  <template slot-scope="scope">
                      <span>{{scope.row.amount}}</span>
                  </template>
              </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
              <el-button size="mini" @click="dialogDetailVisible=false" type="primary">关闭</el-button>
          </div>
      </el-dialog>

      <el-dialog title="同步订单" :visible.sync="dialogSyncVisible" :close-on-click-modal="false" width="600px">
          <el-form :rules="rules" :model="orderForm" ref="orderForm" label-width="80px">
              <el-form-item label="同步平台" prop="platform">
                  <el-select size="mini" v-model="orderForm.platform" placeholder="同步平台">
                      <el-option label="淘宝" value="1"></el-option>
                      <el-option label="京东" value="2"></el-option>
                      <el-option label="拼多多" value="3"></el-option>
                      <el-option label="唯品会" value="4"></el-option>
                      <el-option label="考拉海购" value="5"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="时间类型" prop="taokeQueryType" v-if="orderForm.platform==1">
                  <el-select size="mini" v-model="orderForm.taokeQueryType" placeholder="时间类型">
                      <el-option label="下单时间" value="1"></el-option>
                      <el-option label="付款时间" value="2"></el-option>
                      <el-option label="结算时间" value="3"></el-option>
                      <el-option label="更新时间" value="4"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="时间类型" prop="jdQueryType" v-if="orderForm.platform==2">
                  <el-select size="mini" v-model="orderForm.jdQueryType" placeholder="时间类型">
                      <el-option label="下单时间" value="1"></el-option>
                      <el-option label="完成时间" value="2"></el-option>
                      <el-option label="更新时间" value="3"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="时间类型" prop="wphQueryType" v-if="orderForm.platform==4">
                  <el-select size="mini" v-model="orderForm.wphQueryType" placeholder="时间类型">
                      <el-option label="下单时间" value="1"></el-option>
                      <el-option label="更新时间" value="2"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="时间类型" prop="wphQueryType" v-else-if="orderForm.platform==5">
                  <el-select size="mini" v-model="orderForm.haitaoQueryType" placeholder="时间类型">
                      <el-option label="下单时间" value="1"></el-option>
                      <el-option label="付款时间" value="2"></el-option>
                      <el-option label="更新时间" value="3"></el-option>
                  </el-select>
              </el-form-item>

              <el-form-item label="选择时间">
                  <el-date-picker
                      size="mini"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      format="yyyy-MM-dd HH:mm:ss"
                      v-model="orderDate"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                  </el-date-picker>
                  <p>京东、拼多多和唯品会必选，淘客和京东支持按下单时间筛选</p>
              </el-form-item>
          </el-form>
          
          
          <div slot="footer" class="dialog-footer">
              <el-button size="mini" @click="dialogSyncVisible=false">取消</el-button>
              <el-button :loading="orderLoading" size="mini" type="primary" @click="doSync()">同步</el-button>
          </div>
      </el-dialog>
  </div>
</template>
<script>
  import {
      retail_order_list,
      retail_order_settle,
      retail_order_sync,
      retail_order_in
  } from '@/api/retail_product';

  export default {
      name: 'retail-order-list',
      // components: {
      // },
      // props: {
      //     formData: Object
      // },
      // computed: {
      // },
      // watch: {
      //     formData: {
      //         immediate: true,
      //         handler (val) {
      //             this.form.orderStatus = val.order_status;

      //             this.getList();
      //         }
      //     }
      // },
      data() {
          return {
              rules: {
                  platform: [
                      {
                          required: true,
                          message: '请选择同步平台',
                          trigger: 'blur'
                      }
                  ],
              },
              orderLoading: false,
              orderForm: {
                  platform: undefined,
                  startDate: undefined,
                  endDate: undefined,
                  taokeQueryType: "4",
                  jdQueryType: "3",
                  wphQueryType: "1",
                  haitaoQueryType: "1",
              },
              orderDate: undefined,
              dialogSyncVisible: false,
              pickerOptions: {
                  shortcuts: [{
                      text: '最近一周',
                      onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                      picker.$emit('pick', [start, end]);
                      }
                  }, {
                      text: '最近一个月',
                      onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                      picker.$emit('pick', [start, end]);
                      }
                  }, {
                      text: '最近三个月',
                      onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                      picker.$emit('pick', [start, end]);
                      }
                  }]
              },
              tkCreatedAt: undefined,
              ids: [],
              rewardList: [],
              dialogDetailVisible: false,
              tableHeight: 200,
              form: {
                  platform: "2",
                  orderStatus: "0",
                  orderNo: undefined,
                  settleStatus: "0",
                  inStatus: "0",
                  title: undefined,
                  startDate: undefined,
                  endDate: undefined,
                  pageNum: 1,
                  pageSize: 20,
                  orderCol: undefined,
                  orderAsc: undefined,
                  nickName: undefined,
                  parentNickName: undefined,
              },
              list: [],
              total: 0,
          }
      },
      created() {
          this._getTableHeight();
          
      },
      mounted() {
        this.getList();
          const that = this

          window.onresize = () => {

              return (() => {

                  that._getTableHeight()

              })()
          }
      },
      methods: {
          doSync() {
              const set = this.$refs;
              set["orderForm"].validate(valid => {
                  if (valid) {
                      this.orderLoading = true;
                      if(this.orderDate) {
                          this.orderForm.startDate = this.orderDate[0];
                          this.orderForm.endDate = this.orderDate[1];
                      } else {
                          this.orderForm.startDate = undefined;
                          this.orderForm.endDate = undefined;
                      }
                      retail_order_sync(this.orderForm)
                          .then(() => {
                              this.orderLoading = false;
                              this.dialogSyncVisible = false;
                              this.getList();
                              this.$message.success("订单数据已同步");
                          }).catch((err)=>{
                              this.orderLoading = false;
                          })
                  } else {
                      return false;
                  }
              });
          },
          sync() {
              this.orderForm.platform = undefined;
              this.orderForm.startDate = undefined;
              this.orderForm.endDate = undefined;
              this.orderDate = undefined;

              this.dialogSyncVisible = true;
          },
          selectChange(selection) {
              this.ids = [];
              if(selection && selection.length > 0) {
                  selection.forEach((item)=>{
                      this.ids.push(item.id)
                  })
              }
              // console.log(this.ids)
          },
          clear() {
              this.$refs.dataTable.clearSelection();
          },
          exportExcel() {

          },
          _getTableHeight() {
              this.tableHeight = window.innerHeight - 280
          },
          tblSort(d) {
              this.form.orderCol = d.prop;
              this.form.orderAsc = d.order;

              this.handleFilter();
          },
          handleFilter() {
              this.form.pageNum = 1;
              this.getList();
          },
          handleSizeChange(val) {
              this.form.pageSize = val;
              this.getList();
          },
          handleCurrentChange(val) {
              this.form.pageNum = val;
              this.getList();
          },
          getList() {
              if(this.tkCreatedAt) {
                  this.form.startDate = this.tkCreatedAt[0];
                  this.form.endDate = this.tkCreatedAt[1];
              }
              retail_order_list(this.form).then(response => {
                  this.list = response.data.list;
                  this.total = response.data.total;
              })
          },
          getStatusColor(row) {
              if(row.profitStatus == 5) {
                  return "success"
              }

              return "danger"
          },
          handleDetail(row) {
              this.rewardList = [];
              if(row.rewardUid > 0) {
                  this.rewardList.push(
                      {
                          uid: row.rewardUid,
                          nickName: row.rewardNickName,
                          percent: row.rewardPercent,
                          amount: row.rewardAmount,
                      }
                  )
                  if(row.rewardUid2 > 0) {
                      this.rewardList.push(
                          {
                              uid: row.rewardUid2,
                              nickName: row.rewardNickName2,
                              percent: row.rewardPercent2,
                              amount: row.rewardAmount2,
                          }
                      )
                  }
                  if(row.rewardUid3 > 0) {
                      this.rewardList.push(
                          {
                              uid: row.rewardUid3,
                              nickName: row.rewardNickName3,
                              percent: row.rewardPercent3,
                              amount: row.rewardAmount3,
                          }
                      )
                  }

                  if(row.rewardUid4 > 0) {
                      this.rewardList.push(
                          {
                              uid: row.rewardUid4,
                              nickName: row.rewardNickName4,
                              percent: row.rewardPercent4,
                              amount: row.rewardAmount4,
                          }
                      )
                  }

                  if(row.rewardUid5 > 0) {
                      this.rewardList.push(
                          {
                              uid: row.rewardUid5,
                              nickName: row.rewardNickName5,
                              percent: row.rewardPercent5,
                              amount: row.rewardAmount5,
                          }
                      )
                  }

                  if(row.rewardUid6 > 0) {
                      this.rewardList.push(
                          {
                              uid: row.rewardUid6,
                              nickName: row.rewardNickName6,
                              percent: row.rewardPercent6,
                              amount: row.rewardAmount6,
                          }
                      )
                  }
              }

              this.dialogDetailVisible = true;
          },
          handleSettle(row) {
              let ids = [];
              if(row && row.id > 0) {
                  ids.push(row.id);
              } else {
                  ids = this.ids;
              }

              if(!ids || ids.length < 1) {
                  this.$message.error("请选择要结算的订单");
              } else {
                  this.$confirm('确定结算?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                  })
                      .then(() => {
                          retail_order_settle(ids).then((res)=>{
                              this.$message.success("所选项已结算");

                              this.getList();
                          }).catch((err)=>{

                          })
                      }).catch(()=>{});
              }

          },
          handleIn(row) {
              let ids = [];
              if(row && row.id > 0) {
                  ids.push(row.id);
              } else {
                  ids = this.ids;
              }

              if(!ids || ids.length < 1) {
                  this.$message.error("请选择要入账的订单");
              } else {
                  this.$confirm('确定入账?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                  })
                      .then(() => {
                          retail_order_in(ids).then((res)=>{
                              this.$message.success("所选项已入账");

                              this.getList();
                          }).catch((err)=>{

                          })
                      }).catch(()=>{});
              }

          },
          handleSend(row) {
              
          }

      }
  }
</script>
<style lang="scss" scoped>
  .cell {
      line-height: 1.5;
      padding: 0 2px;

      .order-img-box {
          margin-left: 10px;
          margin-bottom:10px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          text-align: left;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;

          .order-no {
              margin-bottom: 10px;
              font-size:14px;
          }

          .title-img {
              position: relative;
              border-radius: 4px;
              overflow-y: hidden;

              .img-text-box {
                  margin-left: 10px;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;

                  .img {
                      width: 100px;
                      height: 100px;
                      border-radius: 4px;
                      margin-right: 10px;
                  }

                  .img-text {
                      width: 240px;
                      height: 36px;
                      line-height: 18px;
                      margin-bottom: 10px;
                  }

                  .btn-text {
                      width: auto;
                      height: 18px;
                      background: rgba(51,51,51,.1);
                      font-size: 12px;
                      padding: 2px 4px;
                  }
              }
          }
      }
  }
</style>